<template>
  <div class="inventory-management-container">
    <h1>库存管理流程</h1>

    <!-- 步骤条 -->
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="原材料入库" />
      <el-step title="成品入库" />
    </el-steps>

    <!-- 原材料入库 -->
    <div v-show="activeStep === 1" class="step-content">
      <el-card>
        <el-form :model="rawMaterialForm" ref="rawMaterialFormRef" label-width="120px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="rawMaterialForm.name" placeholder="原材料名称" />
          </el-form-item>
          <el-form-item label="供应商ID" prop="supplierId">
            <el-input v-model.number="rawMaterialForm.supplierId" placeholder="供应商ID" type="number" />
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model.number="rawMaterialForm.price" placeholder="价格" type="number" />
          </el-form-item>
          <el-form-item label="数量" prop="stockQuantity">
            <el-input v-model.number="rawMaterialForm.stockQuantity" placeholder="入库数量" type="number" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="rawMaterialForm.unit" placeholder="单位" />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="rawMaterialForm.remarks" type="textarea" placeholder="备注" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRawMaterial">提交</el-button>
            <el-button @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 成品入库 -->
    <div v-show="activeStep === 2" class="step-content">
      <el-card>
        <el-form :model="productForm" ref="productFormRef" label-width="120px">
          <el-form-item label="产品名称" prop="item_type">
            <el-input v-model="productForm.item_type" placeholder="产品名称" />
          </el-form-item>
          <el-form-item label="产品编号" prop="item_id">
            <el-input v-model.number="productForm.item_id" placeholder="产品编号" type="number" />
          </el-form-item>
          <el-form-item label="数量" prop="quantity">
            <el-input v-model.number="productForm.quantity" placeholder="入库数量" type="number" />
          </el-form-item>
          <el-form-item label="单位" prop="location">
            <el-input v-model="productForm.location" placeholder="单位" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitProduct">提交</el-button>
            <el-button @click="prevStep">上一步</el-button>
            <el-button @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import rawMaterialApi from '../api/rawMaterialApi.js';
import inventoryApi from '../api/inventoryApi.js';

// 步骤控制
const activeStep = ref(1);
const nextStep = () => activeStep.value = Math.min(activeStep.value + 1, 2);
const prevStep = () => activeStep.value = Math.max(activeStep.value - 1, 1);

// 表单引用
const rawMaterialFormRef = ref(null);
const productFormRef = ref(null);

// 表单数据
const rawMaterialForm = reactive({
  id: null, name: '', supplierId: null, price: null, stockQuantity: null, unit: '', remarks: ''
});

// 对应后端 Inventory 表
const productForm = reactive({
  id: null,        // 库存ID
  item_id: null,   // 产品编号
  item_type: '',   // 产品名称
  quantity: 0,     // 数量
  location: '',    // 单位
  is_deleted: 0    // 默认 0
});

// 原材料入库
const submitRawMaterial = async () => {
  if (!rawMaterialFormRef.value) return;
  try {
    await rawMaterialFormRef.value.validate();

    let res;
    if (rawMaterialForm.id) {
      res = await rawMaterialApi.edit(rawMaterialForm.id, rawMaterialForm);
    } else {
      res = await rawMaterialApi.add(rawMaterialForm);
    }

    if (res?.code === 200) ElMessage.success('原材料操作成功');
    else ElMessage.error(res.msg || '原材料操作失败');
  } catch (err) {
    if (err?.message?.includes('校验失败')) return;
    ElMessage.error('原材料异常: ' + (err.message || '未知错误'));
  }
};

// 成品入库
const submitProduct = async () => {
  if (!productFormRef.value) return;
  try {
    await productFormRef.value.validate();

    let res;
    if (productForm.id) {
      res = await inventoryApi.edit(productForm.id, productForm);
    } else {
      res = await inventoryApi.add(productForm);
    }

    if (res?.code === 200) ElMessage.success('成品入库操作成功');
    else ElMessage.error(res.msg || '成品入库失败');
  } catch (err) {
    if (err?.message?.includes('校验失败')) return;
    ElMessage.error('成品入库异常: ' + (err.message || '未知错误'));
  }
};
</script>

<style scoped>
.inventory-management-container { padding: 20px; max-width: 1000px; margin: auto; }
.step-content { margin-top: 20px; }
</style>